import { Component, Input, OnChanges } from "@angular/core";
import { UtilService } from "src/app/core/util/util.service";
import { StatBase } from "../statistics/stat-base";

@Component({
    selector: "app-gate-stat",
    templateUrl: "./gate-stat.component.html",
    styleUrls: ["./gate-stat.component.scss"]
})
export class GateStatComponent extends StatBase implements OnChanges {
    @Input() type: string;
    @Input() list: any[] = [];

    gateData: any = {
        count: 0,
        areaSum: 0
    };
    gateTypeOptChange: any = {};
    onOffTypeOptChange: any = {};
    gateCapacityOptChange: any = {};

    constructor(private util: UtilService) {
        super();
    }

    ngOnChanges(): void {
        console.log(this.type);
        this.gateData.count = this.list.length;
        this.gateData.areaSum = 0;
        if (this.list.length) {
            this.renderChartGate();
        }
    }

    renderChartGate() {
        const gateType = this.type !== 'zhikaikou' ? this.util.getItemValues(this.list, "type") : this.util.getItemValues(this.list, "structureType");
        const gateTypeMapper = this.util.getTop5Mapper(this.util.getScatterMapper(gateType));
        this.gateTypeOptChange = {
            title: {
                text: "闸门类型"
            },
            series: [
                {
                    data: Object.keys(gateTypeMapper).map(key => {
                        return {
                            value: gateTypeMapper[key],
                            name: key
                        };
                    })
                }
            ]
        };

        if (this.type == "jiezhizha" || this.type == "tuishuizha") {
            const powerType = this.util.getItemValues(this.list, "powerType");
            const powerTypeMapper = this.util.getTop5Mapper(this.util.getScatterMapper(powerType));
            this.onOffTypeOptChange = {
                title: {
                    text: "启闭形式"
                },
                series: [
                    {
                        data: Object.keys(powerTypeMapper).map(key => {
                            return {
                                value: powerTypeMapper[key],
                                name: key
                            };
                        })
                    }
                ]
            };
        }

        if (this.type == "jinshuizha" || this.type == "zhikaikou") {
            const irrigatedArea = this.util.getItemValues(
                this.list,
                "controllingIrrigatedArea",
                true
            );
            this.gateData.areaSum = this.util.sum(irrigatedArea);
        }

        if (this.type == "zhikaikou") {
        } else {
            const actualCapacity = this.util.getItemValues(
                this.list,
                "actualCapacity",
                true
            );
            const actualCapacityMapper = this.util.getScatterMapper(
                actualCapacity
            );
            this.gateCapacityOptChange = {
                title: {
                    text: "实际过水能力"
                },
                xAxis: {
                    name: "过水能力(m³/s)"
                },
                tooltip: {
                    trigger: 'item',
                    axisPointer: {type: 'none'},
                    formatter: params => {
                        return '过水能力: ' + params.value[0] + 'm³/s<br>' +
                                '数量: ' + params.value[1] + '个';
                    }
                    // formatter: '过水能力: {c0}m³/s<br />数量: {c1}个'
                },
                series: [
                    {
                        symbolSize: 8,
                        emphasis: {
                            label: {
                                show: false,
                                formatter: param => {
                                    return `实际过水能力（m³/s）:${param.data[0]}；
                                            数量（个）：${param.data[1]}`;
                                },
                                position: "top"
                            }
                        },
                        data: Object.keys(actualCapacityMapper).map(key => [
                            key,
                            actualCapacityMapper[key]
                        ])
                    }
                ]
            };
        }
    }
}
